﻿@{
    Layout = "../Shared/_LayoutMain.cshtml";
    ViewBag.PageTitle = "视频中心 " + ViewBag.site.SeoTitle;
    ViewBag.PageKeyword = ViewBag.site.SeoKeyword;
    ViewBag.PageDescription = ViewBag.site.SeoDescription;
}
<!--视频聚集.开始-->
<div class="wrapper">
    <div class="video-index">
        <div class="left-box">
            <a v-for="(item,index) in newList" :key="index" v-if="index===0" class="item-box" :href="'/article/video/show/'+item.id">
                <div class="img-box">
                    <el-image :src="common.loadFile(item.imgUrl)" fit="cover"></el-image>
                </div>
                <div class="txt-box">
                    <span class="icon iconfont icon-play"></span>
                    <span class="text">{{item.title}}</span>
                </div>
            </a>
        </div>
        <div class="right-box">
            <div class="picture-list">
                <a v-for="(item,index) in newList" :key="index" v-if="index>=1" class="list-box" :href="'/article/video/show/'+item.id">
                    <div class="img-box">
                        <el-image :src="common.loadFile(item.imgUrl)" fit="cover"></el-image>
                    </div>
                    <div class="txt-box">
                        <span class="icon iconfont icon-play"></span>
                        <span class="text">{{item.title}}</span>
                    </div>
                </a>
            </div>
        </div>
    </div>
</div>
<!--视频聚集.结束-->
<!--分类菜单.开始-->
<div class="wrapper">
    <div class="slider-nav">
        <div class="list-box">
            <span class="title">类别</span>
            <div class="list">
                <a v-for="(item,index) in categoryList" :key="index" :href="'/article/video/list/'+item.id">{{item.title}}</a>
            </div>
        </div>
    </div>
</div>
<!--分类菜单.结束-->
<!--分类列表.开始-->
<div v-for="(item,index) in articleList" :key="index" class="wrapper">
    <div class="ntitle">
        <div class="h3">{{item.title}}</div>
        <a :href="'/article/video/list/'+item.id" class="more">
            <span>更多</span>
            <span class="icon iconfont icon-right-arrow"></span>
        </a>
    </div>
    <div class="video-index">
        <div class="picture-list">
            <a v-for="(article,sindex) in item.data" :key="sindex" class="list-box" :href="'/article/video/show/'+article.id">
                <div class="img-box">
                    <el-image :src="common.loadFile(article.imgUrl)" fit="cover"></el-image>
                </div>
                <div class="txt-box">
                    <span class="icon iconfont icon-play"></span>
                    <span class="text">{{article.title}}</span>
                </div>
            </a>
        </div>
    </div>
</div>
<!--分类列表.开始-->

@section Scripts{
    <script>
        //初始化VUE
        var ve = new Vue({
            el: '#app',
            data: {
                categoryList: [],
                newList: [],
                articleList: []
            },
            methods: {
                //初始化数据
                async initData() {
                    let _this = this;
                    //加载分类
                    AxiosAjax({
                        url: `/client/article/video/category?siteId=@ViewBag.site.Id`,
                        success: function (res) {
                            _this.categoryList = res.data;
                        }
                    });
                    //最新列表
                    AxiosAjax({
                        url: `/client/article/view/channel/video/5?siteId=@ViewBag.site.Id`,
                        success: function (res) {
                            _this.newList = res.data;
                        }
                    });
                    //文章分类列表
                    AxiosAjax({
                        url: `/client/article/view/video/3/4?siteId=@ViewBag.site.Id`,
                        success: function (res) {
                            _this.articleList = res.data;
                        }
                    });
                },
            },
            created() {
                this.initData();
            }
        })
    </script>
}